<template>
    <div>
        <div class="region">
            <div class="left">地区:</div>
            <ul>
                <li :class="{ active: regionactive == '' }" @click="regionClick('')">全部</li>
                <li @click="regionClick(item.value)" v-for="(item) in regionarr" :key="item.value"
                    :class="{ active: regionactive === item.value }">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { HospitalLevelAndRegion } from '@/api/home'
import type { HospitalLevelAndRegionData, HospitalLevelAndRegionArr } from '@/api/home/type'
//控制地区高亮
const regionactive = ref<string>("")
const regionarr = ref<HospitalLevelAndRegionArr>([])
const $emit=defineEmits(['getregion'])
onMounted(() => {
    getHospitalRegion()
})
//获取医院地区
const getHospitalRegion = async () => {
    const res: HospitalLevelAndRegionData = await HospitalLevelAndRegion('Beijin')
    if (res.code === 200) {
        regionarr.value = res.data
    }
}

//医院地区点击事件
const regionClick = (districtcode: string) => {
    regionactive.value = districtcode
    $emit('getregion',districtcode)
} 

</script>

<style lang="less" scoped>
.region {
    display: flex;
    margin: 20px 0;
    color: #7f7f7f;
}

.active {
    color: #55a6fe;
}
li{
    display: inline;
    margin: 0 3px;
    cursor: pointer;
}
</style>